<template>
  <v-page disable-scroll>
    <template #header>
      <v-navbar title="搜索" />
    </template>
    <template #default>
      <view style="margin: 24rpx 24rpx 40rpx">
        <search-input
          v-model="keyword"
          focus
          @search="searchHandle"
        />
      </view>
      <view class="list-header">
        <view> 历史搜索 </view>
        <v-icon
          :custom-style="{ padding: '6rpx' }"
          size="36rpx"
          src="@/static/icons/search-input-clear.svg"
          @click="clearHistory"
        />
      </view>
      <view class="list-content">
        <view
          v-for="item in historyList"
          :key="item"
          class="list-item"
          @click="selectItem(item)"
        >
          {{ item }}
        </view>
      </view>
      <!-- <view class="list-header">
        <view>
          热门搜索
        </view>
        <v-icon
          :custom-style="{ padding: '6rpx' }"
          size="36rpx"
          src="@/static/icons/search-input-refresh.svg"
          @click="refreshHotSearch"
        />
      </view> -->
    </template>
  </v-page>
</template>

<script setup lang="ts">
import SearchInput from './modules/search-input.vue';

const keyword = ref('');
const selectItem = (item: string) => {
  keyword.value = item;
  searchHandle();
};
const searchHandle = () => {
  insertHistory(keyword.value);
  const pageStore = $store.page();
  pageStore.setParameters({ keyword: keyword.value });
  uni.redirectTo({ url: '/pages/search/search-page' });
};

const focus = ref(false);
onLoad(() => {
  focus.value = true;
});

const historyList = ref<string[]>([]);
const clearHistory = async () => {
  historyList.value = [];
  uni.removeStorageSync('search-history');
};
const getHistory = async () => {
  const storeage = uni.getStorageSync('search-history');
  if (storeage) {
    try {
      historyList.value = JSON.parse(storeage) as string[];
    } catch {
      historyList.value = [];
    }
  }
};

const insertHistory = async (keyword: string) => {
  if (!keyword) return;
  let historyList: string[] = [];
  try {
    historyList = JSON.parse(uni.getStorageSync('search-history') || '[]');
  } catch (e) {
    console.error(e);
  }
  if (!historyList.includes(keyword)) {
    if (historyList.length >= 10) {
      historyList.pop();
    }
    historyList.unshift(keyword);
  } else {
    historyList = historyList.filter((item) => item !== keyword);
    historyList.unshift(keyword);
  }
  uni.setStorageSync('search-history', JSON.stringify(historyList));
};
onMounted(getHistory);
</script>

<style lang="scss" scoped>
.list-header {
  height: 40rpx;
  margin: 0 24rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-content {
  display: flex;
  flex-wrap: wrap;
  gap: 28rpx;
  padding: 0 24rpx;
  margin-bottom: 40rpx;
  .list-item {
    width: fit-content;
    max-width: 100%;
    height: 62rpx;
    line-height: 62rpx;
    padding: 0 34rpx;
    background-color: #f5f6fa;
    border-radius: 32rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
}
</style>
